<template>
  <div class="about">
    <el-container>
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-message"></i>导航一
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>导航二
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-setting"></i>导航三
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>

        <el-main>
          <!-- <el-table :data="tableData">
        <el-table-column prop="date" label="日期" width="140">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
          </el-table>-->
          <!-- <el-button type="text"></el-button> -->
          <!-- <el-button plain icon="el-icon-plus" type="text" @click="dialogFormVisible = true">添加供应商 </el-button> -->
          <el-button plain icon="el-icon-plus" type="text" @click="addUpdate()">添加供应商s</el-button>
          <!-- <el-button type="primary" ></el-button> -->
          <!-- 表格 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="supplierName" label="供应商" width="180"></el-table-column>
            <el-table-column prop="supplierContact" label="联系人" width="180"></el-table-column>
            <el-table-column prop="phone" label="联系电话"></el-table-column>
            <el-table-column prop="status" label="状态">启用</el-table-column>
            <el-table-column prop="address" label="操作">
              <el-button type="text" size="small">编辑</el-button>
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="open(scope, tableData)"
                  type="text"
                  size="small"
                >移除</el-button>

                <el-button @click.native.prevent="addUpdate(scope)" type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 添加供应商 -->
          <el-dialog title="添加供应商" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="活动名称" :label-width="formLabelWidth">
                <el-input v-model="form.supplierName" auto-complete="off"></el-input>
              </el-form-item>

              <el-form-item label="供应商联系人" :label-width="formLabelWidth">
                <el-input v-model="form.supplierContacts" auto-complete="off"></el-input>
              </el-form-item>

              <el-form-item label="联系电话" :label-width="formLabelWidth">
                <el-input v-model="form.phone" auto-complete="off"></el-input>
              </el-form-item>

              <el-form-item label="纤细地址" :label-width="formLabelWidth">
                <el-input v-model="form.address" auto-complete="off"></el-input>
              </el-form-item>

              <el-form-item label="备注信息">
                <el-input type="textarea" v-model="form.description"></el-input>
              </el-form-item>

              <el-form-item label="状态" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                  <el-radio label="启用"></el-radio>
                  <el-radio label="禁用"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <!-- <el-button @click="breaks()"></el-button> -->
              <el-button type="text" @click="breaks">取 消</el-button>
              <el-button type="primary" @click="addData()">确 定</el-button>
            </div>
          </el-dialog>
          <!-- 移除供应商 -->
          <el-dialog title="添加供应商" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="活动名称" :label-width="formLabelWidth">
                <el-input v-model="form.supplierName" auto-complete="off"></el-input>
              </el-form-item>

              <el-form-item label="供应商联系人" :label-width="formLabelWidth">
                <el-input v-model="form.supplierContacts" auto-complete="off"></el-input>
              </el-form-item>

              <el-form-item label="联系电话" :label-width="formLabelWidth">
                <el-input v-model="form.phone" auto-complete="off"></el-input>
              </el-form-item>

              <el-form-item label="纤细地址" :label-width="formLabelWidth">
                <el-input v-model="form.address" auto-complete="off"></el-input>
              </el-form-item>

              <el-form-item label="备注信息">
                <el-input type="textarea" v-model="form.description"></el-input>
              </el-form-item>

              <el-form-item label="状态" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                  <el-radio label="启用"></el-radio>
                  <el-radio label="禁用"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <!-- <el-button @click="breaks()"></el-button> -->
              <el-button type="text" @click="breaks">取 消</el-button>
              <el-button type="primary" @click="addData()">确 定</el-button>
            </div>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import http from "../until/user";
import qs from "qs";
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        supplierContacts: "",
        supplierName: "",
        address: "",
        phone: "",
        static: "",
        description: "",
        supplierId: ""
      },
      formLabelWidth: "120px",
      ruleForm: {
        resource: ""
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    addUpdate(val) {
      console.log(val.row);
      this.form.region = true;
      this.dialogFormVisible = true;
      this.form.address = val.row.address;
      this.form.description = val.row.description;
      this.form.phone = val.row.phone;
      this.form.supplierContacts = val.row.supplierContacts;
      this.form.supplierName = val.row.supplierName;
      this.form.supplierId = val.row.supplierId;
    },
    open(index, rows) {
      console.log(index.row.supplierId);
      this.$alert("确定删除这条数据吗", "删除", {
        confirmButtonText: "确定",
        callback: action => {
          rows.splice(index, 1);
          this.dialogFormVisible = false;
          let params = {
            id:index.row.supplierId
          };
          http
            .post(
              "http://49.235.147.95:3001/api/supplier/delete",
              qs.stringify(params)
            )
            .then(res => {
              console.log(res);
            });
          this.$message({
            type: "info",
            message: `action: ${action}`
          });
        }
      });
    },
    // deleteRow(index, rows) {
    // },
    breaks() {
      this.dialogFormVisible = false;
    },
    addData() {

      if (this.form.region) {
        let params = {
          address: this.form.address,
          description: this.form.description,
          phone: this.form.phone,
          status: 1,
          supplierContact: this.form.supplierContacts,
          supplierName: this.form.supplierName,
          supplierId: this.form.supplierId
        };
        http
          .post(
            "http://49.235.147.95:3001/api/supplier/update",
            qs.stringify(params)
          )
          .then(res => {
            this.dialogFormVisible = false;
             window.location.reload()
            console.log(res);
          });
      } else {
        if (this.form.phone == "") {
          alert("电话不能为空");
        } else {
          
          let params = {
            address: this.form.address,
            description: this.form.description,
            phone: this.form.phone,
            status: 1,
            supplierContact: this.form.supplierContacts,
            supplierName: this.form.supplierName
          };
          console.log(params);
          http
            .post(
              "http://49.235.147.95:3001/api/supplier/add",
              qs.stringify(params)
            )
            .then(res => {
              this.dialogFormVisible = false;
              window.location.reload()
              console.log(res);
            });
        }
      }
    },
    getList() {
      http.get("http://49.235.147.95:3001/api/supplier/list").then(res => {
        console.log(res.data.data);
        this.tableData = res.data.data;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.about {
  width: 100%;
  height: 100%;
}

.el-container {
  height: 100%;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-container[data-v-039c5b43] {
  height: 100%;
}
.el-aside {
  color: #333;
}
</style>
